<script lang='ts' setup>
import { inject, defineProps, PropType, watch } from 'vue'
import { Viewer, Cartesian2, Color, Cartesian3, ConstantPositionProperty } from 'cesium'
import * as Cesium from 'cesium'

const props = defineProps({
  position: {
    type: Object as PropType<{ lon: number, lat: number }>,
    default: () => ({ lon: 120, lat: 30 })
  }
})
const viewer = inject<Viewer>('vumViewer')!
const entity = viewer.entities.add({
  position: Cartesian3.fromDegrees(120, 30),
  point: {
    show: true,
    pixelSize: 10,
    color: Color.YELLOW
  }
})
watch(() => props.position, (v) => {
  let cartesian3 = Cartesian3.fromDegrees(v.lon, v.lat)
  entity.position = new ConstantPositionProperty(cartesian3)
}, {
  immediate: true
})



// const handle = new ScreenSpaceEventHandler(viewer.canvas)
// handle.setInputAction((event: any) => {
//   let globe = viewer.scene.globe
//   let windowPosition: Cartesian2 = event.position
//   let cartesian3 = globe.pick(viewer.camera.getPickRay(windowPosition), viewer.scene)
//   entity.position = new ConstantPositionProperty(cartesian3)
//   if (!cartesian3) return
//   let cartographic = globe.ellipsoid.cartesianToCartographic(cartesian3)
//   let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(7)
//   let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(7)
// }, ScreenSpaceEventType.LEFT_CLICK)

</script>
<template>
  <slot>
  </slot>
</template>
<style lang='scss' scoped></style>